<template>
  <div>
    <h2>会员修改页面</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">账号</td>
          <td><input type="text" v-model="state.Username" /></td>
        </tr>
        <tr>
          <td align="right">密码</td>
          <td><input type="password" v-model="state.Userpwd" /></td>
        </tr>
        <tr>
          <td align="right">确认密码</td>
          <td><input type="password" v-model="pwd1" /></td>
        </tr>
        <tr>
          <td align="right">手机号</td>
          <td><input type="text" v-model="state.Phone" maxlength="11"/></td>
        </tr>
        <tr>
          <td align="right">身份证</td>
          <td><input type="text" v-model="state.Card" maxlength="18"/></td>
        </tr>
        <tr>
          <td align="right">生日</td>
          <td><input type="date" v-model="state.Birthday" /></td>
        </tr>
        <tr>
          <td align="right">性别</td>
          <td>
            <input
              type="radio"
              name="sex"
              v-model="state.Sex"
              :value="true"
            />男
            <input
              type="radio"
              name="sex"
              v-model="state.Sex"
              :value="false"
            />女
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td><input type="button" value="修改" @click="ok" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
//引用数据类型
import { reactive, toRefs,onMounted } from 'vue';
//引用网络
import axios from 'axios';
//引用跳转页面
import { useRoute, useRouter } from 'vue-router';
//import router from '@/router';
const router=useRouter();
const route=useRoute();

let data = reactive({
  state: {
    Username: '',
    Userpwd: '',
    Phone: '',
    Card: '',
    Birthday: '',
    Sex: true
  },
  pwd1:''
});
let { state,pwd1 } = toRefs(data);

onMounted(()=>{
  getdata();
})
//函数
//实现数据反填
const getdata=()=>{

  let obj={
    Id:route.query.Id,
  };

  axios({
    url:'/api/one/ft/ft',
    method:'get',
    params:obj,
  })
  .then((res)=>{
    console.log(res);
    state.value=res.data.data;
    pwd1.value=res.data.data.Userpwd;
    state.value.Birthday=res.data.data.Birthday.substring(0,10);
    })
  .catch((err)=>{
    console.log(err)
  })
}

//会员注册
const ok = () => {
  //1.非空验证+有效性

  if(state.value.Username==''){
      alert('账户不能空')
      return;
  }
  if(state.value.Userpwd==''){
      alert('密码不能空')
      return;
  }
  if(state.value.Userpwd!=pwd1.value){
    alert('确认密码不一样')
    return;
  }
  if(state.value.Phone==''){
    alert('手机号不能为空')
    return;
  }
  //手机号正侧表达式
  let reg=/^1[3-9]\d{9}$/;
  if(reg.test(state.value.Phone)==false){
    alert('手机号不符合要求');
    return;
  }
  //身份证表达式
  let reg1=/^\d{17}[0-9xX]$/;
  if(reg1.test(state.value.Card)==false){
    alert('身份证号不符合要求');
    return;
  }
  if(state.value.Birthday==''){
    alert('生日不能为空')
    return;
  }
  //2.发送网络请求

  let obj={
    Id:route.query.Id,
    Username:state.value.Username,
    Userpwd:state.value.Userpwd,
    Phone:state.value.Phone,
    Card: state.value.Card,
    Birthday: state.value.Birthday,
    Sex: state.value.Sex
  }
axios({
  url:'/api/one/updatemember/updatemember',
  method:'put',
  data:obj
})
.then((res)=>{
  console.log(res)
  if(res.data.data==1){
    alert('修改成功');
    router.push('/main/memberList')
  }
  else{
    alert('修改失败');
  }

})
.catch((err)=>{
  console.log(err)
})

};
</script>

<style scoped></style>
